<template>
    <div class="container container-editUser">
        <a-drawer width="1000" title="" placement="right" :closable="true" :visible="visible" @close="onClose"
            class="editUser-drawer">
            <img class="login-bg" :src="require('@/assets/img/login-bg.png')" />
            <a-spin tip="Loading..." :spinning="formLoading">
                <img class="login-logo-img" :src="require('@/assets/img/login-f.png')" />
                <a-form-model layout="inline" class="yuan-form" :label-col="{ style: { width: '120px' } }"
                    :wrapper-col="{ style: { width: 'calc(100% - 130px)' } }" ref="form" :model="formData" :rules="rules">
                    <div class="login-main">

                        <div class="login-qrcode">
                            <a-form-model-item label="头像" class="yuan-form-item" v-if="pageReady">
                                <UploadVue :uploadLength="1" @uploadChange="uploadChangeHead"
                                    :defImgList="formData.headPortrait?[formData.headPortrait]:[]" />
                                <div style="line-height:30px">jpg.png.gif格式.不超过2MB</div>
                            </a-form-model-item>
                        </div>

                        <div class="form-panel">
                            <a-form-model-item class="yuan-form-item" label="姓名" prop="name">
                                <a-input style="width:250px" v-model="formData.name" placeholder="请输入姓名"
                                    autocomplete="new-user" />
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="手机号">
                                <a-input style="width:250px" v-model="formData.phone" disabled />
                            </a-form-model-item>
                            <div class="login-btn-box">
                                <a-button class="login-btn" type="default" @click="onClose">取消</a-button>
                                <a-button class="login-btn" type="primary" @click="clickSure">确认修改</a-button>
                            </div>

                        </div>

                    </div>
                </a-form-model>
            </a-spin>
        </a-drawer>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import UploadVue from "@/components/upload.vue";
import api from "@/api/api";
import { getStorageUserInfo } from "@/utils";

@Component({
    name: "dom",
    components: { UploadVue },
})
export default class index extends Vue {
    @Prop({ default: false }) visible!: boolean;
    formData: any = {};
    formLoading = false;
    rules = {
        name: [{ required: true, message: "请输入姓名", trigger: "change" }],
    };

    onClose() {
        (this.$refs.form as any).resetFields();
        this.$emit("closeDrawer");
    }

    clickSure() {
        if (!this.formData.headPortrait) {
            this.$message.error("请上传头像");
            return;
        }
        (this.$refs.form as any).validate(async (valid) => {
            if (!valid) return;
            let data = {
                name: this.formData.name,
                headPortrait:this.formData.headPortrait
            };
            try {
                this.formLoading = true;

                const res = await api.editUserInfo(data);
                const userInfo = getStorageUserInfo()
                userInfo.headPortrait=this.formData.headPortrait
                userInfo.name=this.formData.name
                
                localStorage.setItem("siteUserInfo", JSON.stringify(userInfo));
                location.reload();
                this.onClose();
            } finally {
                this.formLoading = false;
            }
        });
    }
    pageReady = false;
    mounted() {
        const userInfo = getStorageUserInfo()
        this.formData={
            headPortrait:userInfo.headPortrait,
            name:userInfo.name,
            phone:userInfo.phone
        }
        this.pageReady = true;
    }
    uploadChangeHead(e) {
        this.formData.headPortrait = e.length ? e[0].url : "";
    }
}
</script>

<style lang="scss">
.container-editUser {
}
.editUser-drawer.ant-drawer-open {
    .ant-drawer-content-wrapper {
        right: 30px !important;
    }
}
.editUser-drawer {
    .ant-drawer-content {
        border-radius: 12px;
    }
    .ant-drawer-content-wrapper {
        height: 500px !important;
        top: calc(100vh / 2 - 250px);
    }
    .ant-spin-nested-loading {
        z-index: 2;
    }
    .login-logo-img {
        width: 226px;
    }
    .login-main {
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .login-bg {
        width: 100%;
        height: 500px;
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
        border-radius: 12px;
    }
    .login-qrcode {
        width: 50%;
        border-right: solid 1px #eee;
        height: 400px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .yuan-form {
        // width: 50%;
    }
    .login-btn-box {
        display: flex;
        justify-content: space-between;
        padding: 0 50px;
        margin-top: 30px;
    }
    .login-btn {
        width: 160px;
        height: 48px;
        font-size: 18px;
    }
    .yuan-form-item {
        margin-bottom: 30px !important;
    }
    .code-box {
        display: flex;
        align-items: center;
        .input {
            width: 120px;
        }
    }
}
</style>
